import {FontIcon, Box, Static} from '../components'
import {primaryColor,primaryHover} from '../styles/common-color'


// type ModuleCardPropsType = {
//     icon: string,
//     title: string,
//     height: string,
//     onclick?:Function
// }

const ModuleCard = ({icon, title,onClick}) => {

    return (
        <div onClick={onClick}>
            <Box bgColor={primaryColor} height='8rem' width='8rem' flex='flex' marginBottom='1rem' style={{borderRadius:'50%'}}>
                <FontIcon color='#fff' fontSize='6rem' icon={icon || 'user'} style={{lineHeight: '1',borderRadius:'50%'}}/>
            </Box>
            <Box flex='flex'>
                <Static label={title} fontSize='1.5rem' color='#1c2438' hover={primaryHover}/>
            </Box>


            <style jsx>{`
                div{
                    width:14rem;
                    height:16rem;
                    background:#fff;
                    padding:2rem;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction:column;
                    transition: all .2s ease-in-out;

                    &:hover{
                        box-shadow: 0 1px 6px rgba(0,0,0,.2);
                        border-radius:8px;
                        cursor: pointer;
                    }
                }
            `}
            </style>
        </div>
    )
}

export default ModuleCard